import Vue from 'vue'
import Vuex from 'vuex'

import { INCREMENT } from './mutations-types'

Vue.use(Vuex)











const moduleA = {
  state: {
    name: '123adb',
    counter: 10,
  },
  mutations: {
    updateName(state) {
      state.name = '李四'
    },
    updateNameBBB(state, Payload) {
      state.name = Payload
    },
    decrement(state) {
      state.counter--
    },
  },
  getters: {
    powerCounter(state) {
      return state.counter * state.counter;
    },
    fullName(state) { //获取模块自己的state
      return state.name
    },
    fullName2(state, getters) { // 和 rootStore 不同哦
      return getters.fullName + '2222'
    },
    fullName3(state, getters, rootState) { // 和 rootStore 不同哦
      return getters.fullName2 + ' ' + rootState.counter
    }
  },
  actions: {
    fffUpdateInfo(content) { //如果和 root 同方法名，会一起 变化
      //无参数
      setTimeout(() => {
        //commit 只针对本模块的 mutation,不会调用 rootMustation
        content.commit('updateNameBBB', '张三')
      }, 1000);
    },
  },
}















const stort = new Vuex.Store({
  state: {
    counter: 1000, //如果直接修改的话，默认是 mutations，但是不会 vue-devtools 被监听到
    students: [
      {id: 110, name: 'why', age: 18},
      {id: 111, name: 'koby', age: 24},
      {id: 112, name: 'james', age: 30},
      {id: 113, name: 'curry', age: 10},
    ],
    info: {
      bookName: 'Swift',
      bookPrice: 12.5
    }
  },
  mutations: {  //同步 更改state
    //方法
    // increment(state) {
    //   state.counter++
    // },
    [INCREMENT](state) {  ///注意    es6使用常亮 定义 方法名 
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
    incrementCount(state, n) { //动态更改 state
      console.log('mutations->incrementCount n=', n)
      state.counter += n
    },


    // 注意： 当commit 传过来是 {type: 'incrementCount', count}

    // incrementCount(state, Payload) { //动态更改 state
    //   console.log('mutations->incrementCount n=', Payload)
    //   state.counter += Payload.count;
    // },

    updateInfo(state) {  //视频 136 响应式
      state.info.bookName = 'Lua'


      // ==== 一、新增 ====
      // 注意  注意  注意
      // state.info['address'] = 'Beijing'; 
      // 因为 state没有初始化 info中的address，mutations 就不会监听
      // 导致【不会更新 UI】 , state内容也确实改了 ****

      // so, 你想要 让它 刷新UI 怎么做呢？
      // -- 1 --
      // Vue.set(state.info, 'address', 'Beijing')

      //------------------------------------------------------------------------
      // ==== 二、删除 =====
      // delete state.info.age
      // 该方式 【做不到响应式】     ****

      // so ，解决
      // Vue.delete(state.info, 'age')

    },
  },
  actions: {  //异步 更改state
    // content == 上下文
    aUpdateInfo(content) {
      //无参数
      setTimeout(() => {
        content.commit('updateInfo')
      }, 1000);
    },
    bUpdateInfo(content, Payload) {
      //有参数
      setTimeout(() => {
        content.commit('updateInfo')
        Payload && Payload()
      }, 1000);
    },
    cUpdateInfo(content, Payload) {
      
      //有参数，并使用 Promise
      return new Promise((reslove, reject)=>{
        setTimeout(() => {
          content.commit('updateInfo')
          console.log(Payload)

          const result = true
          if(result) {
            reslove()
          }
          else {
            reject()
          }
        }, 1000);
      })

    },
  },
  getters: {
    powerCounter(state) {
      return state.counter * state.counter;
    },
    more20stu(state) {
      return state.students.filter(s => s.age >= 20 )
    },
    more20stuLength(state, getters) {
      return getters.more20stu.length
    },
    moreAgeStu(state) {
      // 第一种写法 es5
      // return function(age) {
      //   return state.students.filter(s => s.age >= age)
      // }

      //第二种写法 - 简洁 es6
      // return (age)=> {
      //   return state.students.filter(s => s.age >= age)
      // }

      //第三种 - 更简洁 es6 / 坏处： 阅读性 太差
      return age => state.students.filter( s=> s.age >= age)
    }
  },
  modules: {
    aa: moduleA
  }
})

export default stort